<script setup lang="ts" name="Home">
import { userinfo } from "@/store";
const router = useRouter();
import API from "@/api";
const { t } = useI18n();
const piniaUserinfo: any = userinfo();
const images = reactive({
  application: new URL("@/assets/images/Home/icon_apk.png", import.meta.url)
    .href,
  service: new URL("@/assets/images/Home/icon_kefu.png", import.meta.url).href,
  banner: new URL("@/assets/images/Home/banner.png", import.meta.url).href,
  fireworks: new URL("@/assets/images/Home/fireworks.png", import.meta.url)
    .href,
  lottery1: new URL("@/assets/images/Home/lottery1.png", import.meta.url).href,
  lottery2: new URL("@/assets/images/Home/lottery2.png", import.meta.url).href,
  lotteryImg: new URL("@/assets/images/Home/lottery1.png", import.meta.url)
    .href,
});
const data: any = reactive({
  show: false,
  list: [
    {
      resource: new URL(`@/assets/images/Home/banner1.png`, import.meta.url)
        .href,
    },
    {
      resource: new URL(`@/assets/images/Home/banner2.png`, import.meta.url)
        .href,
    },
    {
      resource: new URL(`@/assets/images/Home/banner3.png`, import.meta.url)
        .href,
    },
    {
      resource: new URL(`@/assets/images/Home/banner4.png`, import.meta.url)
        .href,
    },
  ],
  showPicker: false,
  pickRef: null,
  lotteryTypeList: [],
  MarqueeList: [], // 跑马灯
  AdvertiseList: [], // 广告列表
  MarqueeListKey: 0,
});

const {
  list,
  showPicker,
  pickRef,
  lotteryTypeList,
  MarqueeList,
  AdvertiseList,
  MarqueeListKey,
} = toRefs(data);

const lang = computed(() => piniaUserinfo.getLang);

const activeLang = computed(() => [piniaUserinfo.getLang?.code]);

const OfficialList = computed(() => {
  return [
    {
      title: t('home.title5'),
      url: new URL("@/assets/images/Home/lottery1.png", import.meta.url).href,
      lotteryTypeCode:4
    },
    {
      title: t('home.title6'),
      url: new URL("@/assets/images/Home/lottery2.png", import.meta.url).href,
      lotteryTypeCode:3
    },
    {
      title: t('home.title7'),
      url: new URL("@/assets/images/Home/lottery3.png", import.meta.url).href,
      lotteryTypeCode:1
    },
    {
      title: t('home.title8'),
      url: new URL("@/assets/images/Home/lottery4.png", import.meta.url).href,
       lotteryTypeCode:2
    },
  ]
})

const langColumns = computed(() => {
  return piniaUserinfo.getLangList.map((item: any) => {
    return {
      ...item,
      text: item?.langColumns,
      value: item?.id,
    };
  });
});

const goLottery = (code: number, type: string, title: string) => {
  switch (code) {
    case 1:
      router.push(`/colorfultimes?type=${type}&title=${title}&`);
      break;
    case 2:
      router.push(`/pick10Lottery?type=${type}&title=${title}`);
      break;
    case 3:
      router.push(`/raceLottery?type=${type}&title=${title}`);
      break;
    case 4:
      router.push(`/redGreenLottery?type=${type}&title=${title}`);
      break;
    case 5:
      router.push(`/sixLottery?type=${type}&title=${title}`);
      break;
    case 6:
      router.push(`/diceLottery?type=${type}&title=${title}`);
      break;
  }
};
const goOfficialLottery = (item: any, type: number) => {
  router.push({ 
    path: `/nagalandLottery`,
    query: {
      title: item?.title,
      lotteryTypeCode:item?.lotteryTypeCode
    }
  });
};
const handelRefConfirm = () => {
  pickRef.value?.confirm();
};

const handleLangConfirm = ({ selectedOptions }: any) => {
  piniaUserinfo.setActiveLang(selectedOptions[0]);
  showPicker.value = false;
};

// 广告列表banner
const queryAdvertiseList = async () => {
  try {
    let res = await API.getAdvertiseList({});
    if (res.code === 200) {
      AdvertiseList.value = res.data;
    }
  } catch (error) {}
};
queryAdvertiseList();
const compAdvertiseList = computed(() => {
  AdvertiseList.value.forEach((element: any) => {
    if (element?.children) {
      let act = element?.children?.find(
        (im: any) => im.languageCode == piniaUserinfo.getLang.languageCode
      );
      if (act) {
        element.title = act?.title;
        element.url = act?.url;
      }
    }
  });
  MarqueeListKey.value++;
  return AdvertiseList.value;
});
const handleAdvertiseItem = (actItem: any) => {
  if (actItem?.jumpAddress) {
    window.open(actItem.jumpAddress, "_blank");
  }
};

// 滚动消息
const queryMarqueeList = async () => {
  try {
    let res = await API.getMarqueeList({});
    if (res.code === 200) {
      MarqueeList.value = res.data;
    }
  } catch (error) {}
};
queryMarqueeList();
const compMarqueeList = computed(() => {
  MarqueeList.value.forEach((element: any) => {
    if (element?.children) {
      let act = element?.children?.find(
        (im: any) => im.languageCode == piniaUserinfo.getLang.languageCode
      );
      if (act) {
        element.content = act?.content;
        element.url = act?.url;
      }
    }
  });
  return MarqueeList.value;
});
const handleMarqueeItem = (actItem: any) => {
  if (actItem?.jumpAddress) {
    window.open(actItem.jumpAddress, "_blank");
  }
};

const queryLotteryList = async () => {
  let res = await API.lotteryType({});
  if (res.code === 200) {
    lotteryTypeList.value = res.data;
    changeLang();
  }
};
queryLotteryList();
const jumpAddress = (url:string) => {
  window.open(url, "_blank")
}
const changeLang = () => {
  lotteryTypeList.value = lotteryTypeList.value.map((item: any) => {
    if (item?.children) {
      const current = item.children?.find(
        (im: any) => im.languageCode == piniaUserinfo.getLang.languageCode
      );
      if (current) {
        return {
          ...item,
          url: current.url,
          lotteryTypeName: current.title,
        };
      }
    }
  });
};
watch(
  () => piniaUserinfo.getLang,
  (val, preVal) => {
    changeLang();
  },
  { immediate: false, deep: true }
);
</script>

<template>
  <div class="HomeContainer">
    <div class="header">
      <!-- <div class="application">
            <img :src="images.application" alt="" />
            <span>应用程序</span>
          </div> -->
      <div class="headerTitle">{{ t("home.title") }}</div>
      <div class="headerRight">
        <div class="langWrap" @click="showPicker = true">
          <img :src="lang?.url" alt="" />
          <!-- <p>{{ lang?.languageCode }}</p> -->
        </div>
        <a
          class="service"
          target="_blank"
          :href="piniaUserinfo.getWebConfig?.urlAddress"
        >
          <img :src="images.service" alt="" />
        </a>
      </div>
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in compAdvertiseList" :key="index"
        ><img :src="item.url" alt="" @click="jumpAddress(item.jumpAddress)"
      /></van-swipe-item>
    </van-swipe>

    <!-- 横条跑马灯广告 -->
    <div class="adsWrap">
      <img :src="images.fireworks" alt="" />
      <MarqueeText :key="MarqueeListKey" v-if="compMarqueeList.length" :duration="8 * compMarqueeList.length" :repeat="3" class="adsListWrap">
        <div
          v-for="(item, index) in compMarqueeList"
          :key="index"
          class="adsItem"
        >
          <span class="userName">{{ item?.content }}</span>
        </div>
      </MarqueeText>
    </div>

    <div class="lotteryType">
      <div class="typeData" v-for="(item, index) in OfficialList" :key="index" @click="goOfficialLottery(item, index)">
        <img :src="item.url" alt="" />
        <div class="name">{{ item.title }}</div>
      </div>
    </div>

    <div class="lotteryTypeTitle">
      {{ t('home.test6') }}
    </div>
    <div class="lotteryType">
      <div
        v-for="(item, index) in lotteryTypeList"
        :key="index"
        class="typeData"
        @click="goLottery(item?.bigCode, item?.code, item?.lotteryTypeName)"
      >
        <img :src="item?.url" alt="" />
        <div class="name">{{ item?.lotteryTypeName }}</div>
      </div>
    </div>

    <div class="tips">
      <div>{{ t("home.test1") }}</div>
      <div>{{ t("home.test2") }}</div>
      <div>{{ t("home.test3") }}</div>
    </div>
    <div class="copyRight">
      <p>{{ t("home.test4") }}</p>
      <p>{{ t("home.test5") }}</p>
    </div>
  </div>
  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker
      v-model="activeLang"
      :columns="langColumns"
      @cancel="showPicker = false"
      @confirm="handleLangConfirm"
      :visible-option-num="3"
      :title="t('home.title4')"
      ref="pickRef"
    >
      <template #cancel></template>
      <template #confirm></template>
      <template #option="scope">
        <div class="optionItem">
          <img :src="scope?.url" alt="" />
          <p>{{ scope?.languageName }}</p>
        </div>
      </template>
      <template #columns-bottom>
        <van-button
          class="langConfirm"
          round
          block
          type="primary"
          @click="handelRefConfirm"
          >{{ t("home.btn6") }}</van-button
        >
      </template>
    </van-picker>
  </van-popup>
</template>

<style lang="scss" scoped>
@import url("./index.scss");
</style>
<style lang="scss">
.my-swipe {
  margin: 15rem auto 0rem;
  border-radius: 16rem;
  overflow: hidden;
  height: 110rem;
  width: 100%;
  .van-swipe-item {
    overflow: hidden;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
}
</style>
